"use client";

import * as React from 'react';
import { useState, useEffect } from 'react';

import '../style.css'

export default function ContantBanner() {

  const [bannerHover, setBannerHover] = useState<boolean>(false);
  
  // 鼠标移入事件处理函数
  const handleMouseEnter = () => {
    setBannerHover(true);
  };

  const handleMouseLeave = () => {
    setBannerHover(false);
  }

  return (
    <div 
      className="banner"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className="banner-container">
        <img src="/L-1.png" alt="" />
        <img src="/L-2.png" alt="" style={bannerHover?{left: '-270px', top:'223px'}:{}} />
        <img src="/L-3.png" alt="" style={bannerHover?{top: '41px'}:{}} />
        <img src="/L-4.png" alt="" style={bannerHover?{top: '191px'}:{}} />
        <img src="/R-1.png" alt="" style={bannerHover?{top: '35px'}:{}} />
        <img src="/R-2.png" alt="" style={bannerHover?{left: '567px', top:'134px'}:{}} />
        <img src="/B-1.png" alt="" style={bannerHover?{top: '300px'}:{}} />
        
        <div className="banner-texts">
          {/* <p className="text-6xl text-center font-semibold">Tasks</p> */}
          <p className="text-4xl text-center font-semibold">从项目到任务</p>
          <p className="text-3xl text-center font-semibold">一站式解决方案</p>

          <p className="text-md text-center text-gray-500 mt-8" >简化协作，提升效率</p>
          <p className="text-md text-center text-gray-500 mt-2">让项目管理变得简单而智能</p>
          <p className="text-md text-center text-gray-500 mt-2">Tasks，致力于将复杂的项目管理变得简单而高效</p>
          <div className="use-tasks-input-box text-center mt-4">
            <div className="use-tasks-input-container text-center mt-4">
              <input className='use-tasks-input' type="text" placeholder="请输入手机号" />
              <button className='use-tasks-input-btn bg-blue-500  transform hover:bg-blue-600 transition duration-300 ease-in-out'>
                <span className='button-text'>
                  立即使用
                </span>
                {/* <span className='button-icon'><img src="left.png" alt="" width={12} /></span> */}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
